<template>
    <div class="content">
        <el-form class="ls-form form" :model="formData" :rules="rules" ref="formRef">
            <el-form-item label="名称" prop="type_name">
                <div class="w-[245px]">
                    <el-input v-model="formData.type_name" placeholder="请输入分类名称" />
                </div>
            </el-form-item>
            <el-form-item label="状态" prop="status" required>
                <el-radio-group v-model="formData.status">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="0">隐藏</el-radio>
                </el-radio-group>
            </el-form-item>
            <view class="text">用户端是否显示</view>
            <el-form-item label="排序" prop="sort" required class="mg">
                <el-input-number v-model="formData.sort" :min="0" />
            </el-form-item>
            <view class="text">数字越小越靠前</view>
        </el-form>
        <div class="button">
            <el-button class="cancellation" @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitData">确定</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { classificationAdd, getTypeDetail, typeEdit } from '@/api/classification'
import type { FormRules, FormInstance } from 'element-plus'
import useMultipleTabs from '@/hooks/useMultipleTabs'
const { removeTab } = useMultipleTabs()
const route = useRoute()
const router = useRouter()
const formRef = shallowRef<FormInstance>()
const rules = reactive<FormRules>({
    type_name: [{ required: true, message: '请输入分类名称', trigger: ['blur'] }],
    status: [{ required: true, message: '请选择状态', trigger: ['blur'] }],
    sort: [{ required: true, message: '请输入排序', trigger: ['blur'] }]
})
const formData = reactive({
    type_name: '',
    status: 1,
    sort: ''
})
const cancel = () => {
    removeTab()
    router.back()
}
const submitData = async () => {
    await formRef.value?.validate()
    if (route.query.id) {
        await typeEdit({
            type_id: route.query.id,
            type_name: formData.type_name,
            status: formData.status,
            sort: formData.sort
        })
        removeTab()
        router.back()
    } else {
        await classificationAdd({
            type_name: formData.type_name,
            status: formData.status,
            sort: formData.sort
        })
        removeTab()
        router.back()
    }
}
const getDetail = async () => {
    const data = await getTypeDetail({
        type_id: route.query.id
    })
    formData.type_name = data.type_name
    formData.status = data.status
    formData.sort = data.sort
}
route.query.id && getDetail()
</script>

<style scoped>
.content {
    background: #ffffff;
    width: 100%;
    height: 600px;
    border-radius: 4px;
}
.form {
    padding-top: 30px;
    padding-left: 82px;
}
.button {
    margin-top: 94px;
    margin-left: 130px;
}
.cancellation {
    margin-right: 40px;
}
.text {
    font-weight: 400;
    font-size: 14px;
    color: #e71219;
    margin-left: 50px;
}
.mg {
    margin-top: 20px;
}
</style>
